<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="添加目录" name="first">

        <div class="modt-box">添加书签目录</div>


        <el-form ref="form" :model="formmenu" label-width="80px" :rules="rules">
          <el-form-item label="父级菜单" prop="menuId">
            <SelectTree
              size="small"
              :props="props"
              :options="optionData"
              :value="menuId"
              :clearable="isClearable"
              :accordion="isAccordion"
              @getValue="getValue($event)"/>
            <span style="color: red;font-size: 0.7em">*留空为顶级目录</span>
          </el-form-item>
          <el-form-item label="目录名称" prop="menuName">
            <el-input size="small" v-model="formmenu.menuName"></el-input>
          </el-form-item>

          <el-form-item label="顺序" prop="menuOrder">
            <el-input size="small" v-model="formmenu.menuOrder"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="saveModule()">添加目录</el-button>

          </el-form-item>
        </el-form>


      </el-tab-pane>
      <el-tab-pane label="修改目录" name="second">

        <div class="modt-box">修改书签目录</div>

        <el-form ref="form" :model="formmenu" label-width="110px" :rules="rules">
          <el-form-item label="要修改目录" prop="menuId">
            <SelectTree
              size="small"
              :props="props"
              :options="optionData"
              :value="menuId"
              :clearable="isClearable"
              :accordion="isAccordion"
              @getValue="getValue($event)"/>
          </el-form-item>
          <el-form-item label="移动到目录下" prop="parentId">
            <SelectTree
              size="small"
              :props="props"
              :options="optionData"
              :value="menuId"
              :clearable="isClearable"
              :accordion="isAccordion"
              @getValue="getValues($event)"/><span style="color: red;font-size: 0.8em">*可以留空就是不作修改</span>
          </el-form-item>
          <el-form-item label="新目录名称" prop="menuName">
            <el-input size="small" v-model="formmenu.menuName"></el-input>
          </el-form-item>

          <el-form-item label="新顺序" prop="menuOrder">
            <el-input size="small" v-model="formmenu.menuOrder"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="updatemMenu()">修改目录</el-button>

          </el-form-item>
        </el-form>


      </el-tab-pane>
      <el-tab-pane label="删除目录" name="third">


        <div class="modt-box">删除书签目录</div>
        <el-form ref="form" :model="formmenu" label-width="100px" :rules="rules">

          <el-form-item label="删除目录名字" prop="menuId">
            <SelectTree
              size="small"
              :props="props"
              :options="optionData"
              :value="menuId"
              :clearable="isClearable"
              :accordion="isAccordion"
              @getValue="getValue($event)"/>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="warning" @click="deleteModule">删除</el-button>

          </el-form-item>
        </el-form>






      </el-tab-pane>










    </el-tabs>

  </div>
</template>

<script>
  import {
    ModuleList,
    ModuleGet,
    ModuleNodes,
    ModuleSave,
    ModuleDelete
  } from '../api/userMG'
  import SelectTree from "../components/treeSelect.vue";

  export default {
    components: {
      SelectTree
    },
    data() {
      return {
        activeName: 'first',
        isClearable: true,      // 可清空（可选）
        isAccordion: true,      // 可收起（可选）
        // menuId:"",            // 初始ID（可选）
        props: {                // 配置项（必选）
          value: 'menuId',
          label: 'menuName',
          children: 'children',
        },

        list: [],
        showdelete: false,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'menuName'
        },
        formmenu: {
          menuId: '',
          parentId: '',
          menuName: '',
          menuOrder: '',
        },
        // rules表单验证
        // rules: {
        //   parentId: [
        //     { required: true, message: '请选择父级菜单', trigger: 'blur' }
        //   ],
        //   moduleName: [
        //     { required: true, message: '请输入菜单名称', trigger: 'blur' }
        //   ],
        //   moduleIcon: [
        //     { required: true, message: '请输入菜单图标', trigger: 'blur' }
        //   ],
        //   moduleUrl: [{ required: true, message: '请输入URL', trigger: 'blur' }],
        //   moduleOrder: [
        //     { required: true, message: '请输入菜单顺序', trigger: 'blur' }
        //   ]
        // },
        fmenu: []
      }
    },
    /**
     * 创建完毕
     */
    created() {
      this.fetchData()
      this.bookmenu()
    },
    computed: {
      /* 转树形数据 */
      optionData() {
        let cloneData = JSON.parse(JSON.stringify(this.list))      // 对源数据深度克隆
        return cloneData.filter(father => {                      // 循环所有项，并添加children属性
          let branchArr = cloneData.filter(child => father.menuId == child.parentId);       // 返回每一项的子级数组
          branchArr.length > 0 ? father.children = branchArr : ''   //给父级添加一个children属性，并赋值
          return father.parentId == 0;      //返回第一层
        });
      }
    },

    methods: {
      bookmenu() {
        var _this = this;
        if (_this.$route.query.menuId != null) {
          _this.formmenu.menuId = _this.$route.query.menuId
        }
        if (_this.$route.query.activeName != null) {
          _this.activeName = _this.$route.query.activeName
        }
      },
      //添加
      saveModule() {
        var _this = this;
        this.$axios.post(`/api/menu/insertSelective`, this.formmenu).then(response => {
          if (response.status == 200 && response.data.status == 'success') {
            _this.$message({type: 'success', message: '添加成功!'})
            return;
          }
          _this.$message({type: 'error', message: '添加失败!'})

        });
      },
      //全部显示
      fetchData() {
        this.$axios.get(`/api/menu/queryAllList`, this.searchMap).then(response => {
          this.list = response.data;
        });
      },
      // 取值
      getValue(value) {
        this.formmenu.menuId = value
        console.log(this.formmenu.menuId);
      },
      getValues(value) {
        this.formmenu.parentId = value
        console.log(this.formmenu.parentId);
      },
      // 获取数据
      //修改
      updatemMenu() {
        var _this = this;
        this.$axios.post(`/api/menu/updateMenu`, this.formmenu).then(response => {
          if (response.status == 200 && response.data.status == 'success') {
            _this.$message({type: 'success', message: '修改成功!'})
            return;
          }
          _this.$message({type: 'error', message: '修改失败!'})

        });

      },
      // 删除
      deleteModule() {
        var _this = this;
        this.$confirm('删除该目录, 请提前转移目录书签,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$axios.get(`/api/menu/deleteByPrimaryKey/${this.formmenu.menuId}`).then(response => {
            if (response.status == 200 && response.data.status == 'success') {
              _this.$message({type: 'success', message: '删除成功!'})
              return;
            }
            _this.$message({type: 'error', message: '删除失败!'})
          }, response => {

            _this.$message({type: 'error', message: '删除失败!'})
          });
        }).catch(() => {
          _this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },


    }
  }
</script>

<style>
  .user-search {
    margin-top: 20px !important;
  }

  .user-search td {
    margin-top: 20px !important;
  }

  .userRole {
    width: 100%;
  }

  .el-table__expanded-cell {
    padding: 0px !important;
    margin: 0px !important;
  }

  .modt-box {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f0f2f5;
    text-align: center;
    color: #334157;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 24px;
  }

  .mod-btnbox {
    margin-bottom: 20px;
  }

  .treeclass {
    border: 1px solid #f3f3f3;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .selectw {
    width: 100%;
  }
</style>

